<template>
    <div class="dialog">
        <!-- <el-dialog v-model="showDialog" :with-header="false" :show-close="false">
        </el-dialog> -->
        <n-modal v-model:show="showDialog" preset="dialog" style="width: 600px;" :closable="false" :show-icon="false">
            <n-card size="medium">
                <div class="add-group-members-area">
                    <div id="left-area">
                        <!-- 头部 -->
                        <div id="header-area">
                            <n-input v-model:value="searchMembersInfo" type="text" :minlength="1" :maxlength="10"
                                clearable size="medium" :bordered="false">
                                <template #suffix>
                                    <n-icon :component="FlashOutline" />
                                </template>
                            </n-input>
                        </div>
                        <!-- 内容 -->
                        <div id="content-area">
                            <n-scrollbar style="max-height: 350px;">
                                <div id="friend-list">
                                    <div id="friend-items" v-for="(friendItem, friendItemIndex) in filterFriendList"
                                        :key="friendItemIndex"
                                        v-if="filterFriendList != undefined && filterFriendList.length > 0">
                                        <el-checkbox-group v-model="checkList" style="width: 100%;">
                                            <el-checkbox :value="friendItem.friendDetails.uu_id"
                                                style="width: 100%;margin-left: 5px;">
                                                <template #default>
                                                    <div class="flex items-center justify-center">
                                                        <n-avatar :src="friendItem.friendDetails.avatar" />
                                                        <p style="margin-left: 10px;">{{
                                                            friendItem.friendDetails.username
                                                        }}</p>
                                                    </div>
                                                </template>
                                            </el-checkbox>
                                        </el-checkbox-group>
                                    </div>
                                    <n-empty v-else description="信息过滤失败！"></n-empty>
                                </div>
                            </n-scrollbar>
                        </div>
                    </div>
                    <div id="right-area">
                        <!-- 头部 -->
                        <div id="header-area" class="flex items-center justify-between">
                            <p>添加群成员</p>
                            <span v-show="checkList.length > 0 && checkList !== undefined">已选择{{ checkList.length
                            }}个联系人</span>
                        </div>
                        <!-- 内容 -->
                        <div id="content-area">
                            <div id="selected-friends-info-list">
                                <n-scrollbar style="max-height: 310px;">
                                    <div id="friend-items"
                                        v-for="(selectedFriendItem, selectedFriendItemIndex) in selectedFriendsInfo"
                                        :key="selectedFriendItemIndex"
                                        v-if="selectedFriendsInfo.length > 0 && selectedFriendsInfo !== undefined">
                                        <!-- 基本信息 -->
                                        <div id="basic-info">
                                            <div id="front-info">
                                                <n-avatar :src="selectedFriendItem.friendDetails.avatar" />
                                                <span>{{ selectedFriendItem.friendDetails.username }}</span>
                                            </div>
                                            <!-- 尾部按钮 -->
                                            <div id="tail-btns"
                                                @click="removeSelectedFriend(selectedFriendItem.friendDetails.uu_id)">
                                                <el-icon>
                                                    <Close />
                                                </el-icon>
                                            </div>
                                        </div>
                                    </div>
                                    <n-empty v-else description="还有没选择群友哦"></n-empty>
                                </n-scrollbar>
                            </div>
                            <!-- 底部按钮 -->
                            <div id="footer-btns">
                                <div id="cancel-btns">
                                    <n-button dashed color="#C63300" @click="showDialog = false">cancel</n-button>
                                </div>
                                <div id="add-btns">
                                    <n-button dashed color="#FF00FF" @click="inviteGroup()">添加</n-button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </n-card>
        </n-modal>
    </div>
</template>

<script lang="ts">
import { friendStore } from '@/store/friendStore';
import { UserFriendInfo } from '@/types/types';
import { targetChatGroup } from '@/utils/socketPageService';
import { inviteJoinGroupChat } from '@/utils/websocketMessage/sendMessage';
import { FlashOutline } from '@vicons/ionicons5';
import { InputInst } from 'naive-ui';
import { computed, defineComponent, nextTick, onMounted, onUnmounted, reactive, ref, watch } from 'vue';

export default defineComponent({
    name: 'AddMemberDialog',
    props: {
        // 接收父组件传递的groupId信息
        currentGroupId: {
            type: String,
            required: true
        },
        showStatus: {
            type: Boolean,
            required: true
        },
        connectWebsocket: {
            type: [WebSocket, null],
            required: false
        }
    },
    emits: ['update:showAddGroupMembersStatus'],        // 定义自定义事件
    setup(props, { emit }) {
        const searchMembersInfo = ref<string>(""); // 确保这是一个响应式数据
        const filterFriendList = computed((): UserFriendInfo[] | undefined => {
            // 注意：在这里需要扩展列表对象属性，以至于可以实现多选
            if (!searchMembersInfo.value) {
                const listWithChecked = friendStore().storageUserFriendList.map((item) => ({ ...item, checked: false }));
                return listWithChecked;
            } else {
                return friendStore().storageUserFriendList.filter((friend: UserFriendInfo) => {
                    return (friend.friendDetails.username.includes(searchMembersInfo.value)) || (friend.friendDetails.uu_id.includes(searchMembersInfo.value));
                });
            }
        });

        // 控制显示el-dialog显示的变量
        const showDialog = ref<boolean>(false);

        // 存储选择的好友信息
        const selectedFriendsInfo = computed((): UserFriendInfo[] => {
            return checkList.value.map((friendId: string) => {
                return filterFriendList.value?.find((friend: UserFriendInfo) => friend.friendDetails.uu_id === friendId);
            }).filter((f): f is UserFriendInfo => f !== undefined);         // 在这里使用类型谓词来确保filter函数只保留UserFriendInfo类型的元素
        });

        const checkList = ref<string[]>([]);
        // 删除选中的成员信息
        function removeSelectedFriend(friendId: string) {
            const index = checkList.value.indexOf(friendId);
            if (index !== -1) {
                checkList.value.splice(index, 1);
            }
        }

        // 监听 props.showStatus 的变化
        watch(() => props.showStatus, (newStatus: boolean): void => {
            if (newStatus) {
                showDialog.value = true;
            } else {
                showDialog.value = false;
            }
        });

        // 监听 showDialog 的变化
        watch(() => showDialog.value, (newDialog: boolean) => {
            if (!newDialog) {
                emit('update:showAddGroupMembersStatus', false);        // 确保信息同步
            }
        });

        // 邀请群成员加入群聊的事件
        function inviteGroup() {
            inviteJoinGroupChat(props.connectWebsocket as WebSocket, checkList.value, targetChatGroup.group_id, targetChatGroup.group_name);
        }

        return {
            searchMembersInfo,
            filterFriendList,
            showDialog,
            selectedFriendsInfo,
            FlashOutline,
            checkList,
            removeSelectedFriend,
            inviteGroup
        };
    }
});
</script>

<style scoped lang="scss">
.n-modal {
    width: 400px;
    padding: 20px;

    .add-group-members-area {
        display: flex;

        #left-area,
        #right-area {
            min-height: 400px;
            width: 50%;

            #header-area {
                height: 40px;
            }

            #content-area {
                height: 87.4%;

                #friend-list {
                    #friend-items {
                        display: flex;
                        align-items: center;
                        height: 45px;
                    }
                }

                #selected-friends-info-list {
                    height: 90%;

                    #friend-items {
                        margin-top: 5px;
                        height: 40px;

                        #basic-info {
                            height: 100%;
                            width: 100%;
                            display: flex;
                            align-items: center;
                            justify-content: space-between;

                            #front-info,
                            #tail-btns {
                                height: 100%;
                                display: flex;
                                align-items: center;
                            }

                            #front-info {
                                width: 90%;

                                .n-avatar,
                                span {
                                    margin-left: 10px;
                                }
                            }

                            #tail-btns {
                                width: 10%;
                                justify-content: center;
                            }
                        }
                    }
                }

                #footer-btns {
                    position: fixed;
                    display: flex;
                    align-items: center;
                    justify-content: space-evenly;
                    height: 45px;
                    width: 25%;

                    .n-button {
                        width: 100px;
                    }
                }
            }
        }
    }
}
</style>